<template>
  <div
    class="page ad-page"
    :style="{
      backgroundColor: config.backgroundColor,
      paddingBottom: `calc(${pageOffsetBottom} + var(--safe-area-inset-bottom) / 2)`,
    }"
    @click="autoCopyWx"
  >
    <van-skeleton title :row="20" :loading="tplload">
      <div v-for="view in views" :key="view.uid">
        <component
          :is="view.type + '-view'"
          v-bind="getViewArgs(view).props"
          v-on="getViewArgs(view).on"
        />
      </div>
      <div
        class="fixed-view"
        :style="{
          height: `calc(${pageOffsetBottom} + var(--safe-area-inset-bottom) / 2)`,
        }"
      >
        <service v-if="config.enable_service" @click="handleOpenCopy" />
        <!-- <template v-for="(view, index) in fixedViews">
					<component
						:is="view.type + '-fixed'"
						:ref="view.uid"
						:view="view"
						:key="index"
						:style="{
							height: view.options.fixed_height
								? view.options.fixed_height + 'rem'
								: null
						}"
						:offset-bottom="pageOffsetBottom"
					/>
				</template> -->
      </div>
    </van-skeleton>
    <add-wechat-modal
      ref="addWxModel"
      :config="config"
      :customer="customer"
      @copywx="adBehavior('copy')"
    />
  </div>
</template>
<script>
import tpl from "@/mixins/tpl";
import { copy } from "@/directives/clipboard";
import { hasClass } from "@/utils/dom";
import AddWechatModal from "./components/add-wechat-modal";
import axios from "axios";

const component = (name) => import("./components/" + name + ".vue");

export default {
  name: "Ad",
  mixins: [tpl],
  metaInfo() {
    return {
      title: this.config.title,
    };
  },
  components: {
    AddWechatModal,
    // 图片
    ImageView: () => component("view/image"),
    // 文章
    ArticleView: () => component("view/article"),
    // 商城
    ShopView: () => component("view/shop/view"),
    Shop2View: () => component("view/shop/view2"),
    Shop3View: () => component("view/shop/view3"),
    Shop4View: () => component("view/shop/view4"),
    // 拼团
    GroupBuyView: () => component("view/group-buy/view"),
    GroupBuy2View: () => component("view/group-buy/view2"),
    GroupBuy3View: () => component("view/group-buy/view3"),
    GroupBuy4View: () => component("view/group-buy/view4"),
    GroupBuy999View: () => component("view/group-buy/view999"),
    // 客服
    Service: () => component("service"),
    MyOrderView: () => component("view/my-order"),
    WechatView: () => component("view/wechat"),
    DynamicQrcodeView: () => component("view/dynamic-qrcode"),
    // 审核表单
    CheckFormView: () => component("view/check-form"),
    // 微信客服
    WechatContactView: () => component("view/wechat-contact"),
    // 聊天
    ChatView: () => component("view/chat"),
  },
  data() {
    return {};
  },
  computed: {
    fixedViews() {
      return this.views.filter((v) => !!v?.options?.fixed);
    },
    pageOffsetBottom() {
      const { enable_service } = this.config;
      let h = this.fixedViews.reduce((sum, curr) => {
        return sum + curr?.options?.fixed_height || 0;
      }, 0);
      if (enable_service) {
        h += 1.74;
      }
      return h + "rem";
    },
  },
  async created() {
    // const { biz_id1 } = this.$route.query;
    // if (!biz_id1) {
    //   let url = this.$route.query;
    //   let str = "";
    //   for (let key in url) {
    //     str += `${key}=${url[key]}&`;
    //   }
    //   console.log("str", `https://advert.zhimeibot.com?${str}biz_id1=00`);
    //   await (window.location.href = `${location.origin}/ad?${str}biz_id1=00`);
      
    // }
    await this.init();

    // this.getUrl()
  },
  methods: {
    async init() {
      const { id, type } = this.$route.query;
      await this.getTplInfo(id, type).then(() => {
        // document.title = this.config.title;
        const { biz_id, backgroundColor, auto_skip_mp, mp_query, skip_mp_id } =
          this.config;
        document.body.style.backgroundColor = backgroundColor;
        if (auto_skip_mp == 1) {
          this.skipAdMp({ biz_id, mp_query, skip_mp_id });
        }
      });
      this.getCus(id, type);
      // this.adReport();
    },
    getViewArgs(view) {
      let events = {};
      if (["wechat", "dynamic-qrcode"].includes(view.type)) {
        events.click = this.handleOpenCopy;
        events.copywx = this.adBehavior;
      }
      return {
        props: {
          view,
          fixedViews: view.options.fixed ? this.fixedViews : null,
        },
        on: events,
      };
    },
    // 打开加微弹窗
    handleOpenCopy(ev) {
      this.autoCopyWx(ev, () => {
        this.adBehavior("copy");
      });
      this.$refs.addWxModel.open();
    },
    autoCopyWx(ev, cb) {
      if (this.config.copy_type != 1) return;
      if (hasClass(document.body, "van-overflow-hidden")) return;
      copy(this.customer.contact, ev, (res) => {
        console.log(res);
        cb(res);
        // this.$toast(`${res}`);
      });
    },
    getStyle(el, styleProp) {
      if (!el) return null;
      let camelize = function (str) {
        // eslint-disable-next-line no-useless-escape
        return str.replace(/\-(\w)/g, (str, letter) => {
          return letter.toUpperCase();
        });
      };
      if (el.currentStyle) {
        return el.currentStyle[camelize(styleProp)];
      } else if (
        document.defaultView &&
        document.defaultView.getComputedStyle
      ) {
        return document.defaultView
          .getComputedStyle(el, null)
          .getPropertyValue(styleProp);
      } else {
        return el.style[camelize(styleProp)];
      }
    },
    getUrl() {
      axios
        .get("https://apinodejs.suolandai.cn/list/addAdUrl", {
          params: {
            url_name: window.location.href,
          },
        })
        .then((res) => {
          console.log("res>>", res);
          // const str = `aid=__AID__&aid_name=__AID_NAME__&cid=__CID__&cid_name=__CID_NAME__&campaign_id=__CAMPAIGN_ID__&campaign_name=__CAMPAIGN_NAME__&ctype=__CTYPE__&advertiser_id=__ADVERTISER_ID__&csite=__CSITE__&convert_id=__CONVERT_ID__&request_id=__REQUEST_ID__&sl=__SL__&imei=__IMEI__&idfa=__IDFA__&idfa_md5=__IDFA_MD5__&androidid=__ANDROIDID__&oaid=__OAID__&oaid_md5=__OAID_MD5__&os=__OS__&mac=__MAC__&mac1=__MAC1__&ipv4=__IPV4__&ipv6=__IPV6__&ip=__IP__&ua=__UA__&geo=__GEO__&ts=__TS__&callback_param=__CALLBACK_PARAM__&callback_url=__CALLBACK_URL__&model=__MODEL__&union_site=__UNION_SITE__&caid=__CAID__&caid1=__CAID1__&caid2=__CAID2__&caid1_md5=__CAID1_MD5__&caid2_md5=__CAID2_MD5__`;
        });
    },
    //拼接链接参数
    // queryURLParams(url) {
    //   let pattern = /(\w+)=(\w+)/gi; //定义正则表达式
    //   let parames = {}; // 定义参数对象
    //   url.replace(pattern, ($, $1, $2) => {
    //     parames[$1] = $2;
    //   });
    //   return parames;
    // },
  },
};
</script>

<style lang="scss" scoped>
.fixed-view {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: 640px;
  width: 100%;
  background-color: #fff;
}
</style>
